<template>
	<navbar title="确认订单" :isBack="true"></navbar>
	<view class="page">
		<view class="" style="padding: 28rpx 30rpx;	background-color: white;border-radius: 10rpx;" @click="address"
			v-if="Info.goods_info">
			<view class="address" v-if="!Info.address">
				<view class="title">
					请选择收货地址
				</view>
				<image src="/static/image/arrow_left.png" mode="" style="width: 10rpx;height: 20rpx;"></image>
			</view>
			<view class="" style="display: flex;" v-if="Info.address">
				<image src="/static/address/place.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
				<view class="" style="margin-left: 20rpx;font-size: 30rpx;">
					<view class="">
						{{Info.address['name']}} {{Info.address['mobile']}} {{Info.address['province']}}
						{{Info.address['city']}} {{Info.address['area']}}
					</view>
					<view class="">
						{{Info.address['address']}}
					</view>
				</view>
			</view>
		</view>
		<!-- 课程信息 -->
		<view class="course">
			<view class="title">
				课程信息
			</view>
			<view class="course_goods">
				<view class="image">
					<image style="height: 188rpx;width: 242rpx;border-radius: 10rpx;" :src="Info.image"
						mode="aspectFill"></image>
				</view>
				<view class="text">
					<view class="text-content">
						<span style="width: 286rpx;">{{Info.name}}</span>
						<view class="price">
							<span class="span">¥</span>
							<span>{{Info.price}}</span>
						</view>
					</view>
					<view class="" style="margin-top: 30rpx;font-size: 26rpx;color: #999999;">
						<span
							style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;">{{Info.introduce}}</span>
					</view>
					<view class="" v-if="Info.goods_info"
						style="margin-top: 50rpx;display: flex;align-items: center;justify-content: space-between;">
						<view class="" style="width: 70rpx;height: 70rpx;border-radius: 10rpx;">
							<image :src="Info.goods_info.icon" style="width: 70rpx;height: 70rpx;border-radius: 10rpx;"
								mode=""></image>
						</view>
						<view class="" style="font-size: 24rpx;">
							{{param.specs}}
						</view>
						<!-- <view class="" style="font-size: 24rpx;">
							尺码：42
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<!-- 套餐信息 -->
		<!-- <view class="meal">
			<view class="title">
				套餐信息
			</view>
			<view class="image">

			</view>
			<view class="text">
				已选：“男褐色，42”
			</view>
		</view> -->
	</view>
	<view class="" style="background-color: white;position: fixed;bottom: 0rpx;width: 100%;">
		<view class="btn">
			<view class="btn-left">
				<view style="font-size: 28rpx;min-width: 30rpx;white-space: nowrap;">应付:</view>
				<view class="" style="display: flex;align-items: flex-end;font-weight: bold;">
					<span style="font-size:24rpx;margin-bottom: 8rpx;">￥</span>
					<span>{{Info.price}}</span>
				</view>
			</view>
			<view class="btn-right" @click="pushPay">
				立即报名
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue';
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import tools from '@/utils/tools';
	import { trueOrder, addOrder } from '@/service/api/index'
	const param = reactive({
		id: "",
		specs: "",
		address_id: ""
	})
	const Info = reactive(
		{
			address: {},
			classify_id: "",
			goods_info: {
				icon: ""
			},
			id: "",
			image: "",
			introduce: "",
			name: "",
			price: "",
			state: ""
		})
	const state = ref(0);
	const addressVal = ref()
	onLoad((options) => {

		if (options.id) {
			param.id = options.id;
		}
		if (options.specs) {
			param.specs = options.specs;
			console.log(param.specs);
		}
		console.log(state.value + 'load');
		getData()
		// if (options.item) {
		// 	addressVal.value = JSON.parse(options.item)
		// }
		//console.log(JSON.parse(options.item));
	})
	onShow(() => {
		if(!uni.getStorageSync('item')) return
		param.id = uni.getStorageSync('id');
		param.specs = uni.getStorageSync('specs');
		Info.address = JSON.parse(uni.getStorageSync('item'));
		param.address_id = Info.address['id'];
		console.log(Info.address);
		uni.removeStorageSync('item');
		uni.removeStorageSync('id');
		uni.removeStorageSync('specs');
	})
	const getData = async () => {

		const res = await trueOrder(param);
		console.log(res.msg);
		for (let i in Info) {
			Info[i] = res.msg[i];
		}
		// if(addressVal.value){
		// 		Info.address = addressVal.value;
		// }
		param.address_id = Info.address['id'];
		//console.log(res);
	}
	const address = () => {
		tools.navTo('/pagesB/order/address?id=' + param.id + '&specs=' + param.specs)
		// uni.navigateTo({
		// 	url: '/pagesB/order/address'
		// })
	}
	//去支付
	const pushPay = async () => {
		const res = await addOrder(param);
		if (res.code == 1) {
			tools.navTo('/pagesB/order/pay?id=' + res.msg, 4);
		} else {
			tools.showToast(res.msg)
		}


		// uni.navigateTo({
		// 	url: '/pagesB/order/pay'
		// })
	}
</script>

<style scoped lang="scss">
	.page {
		min-height: calc(100vh - 68px);
		background-color: #F8F8F9;
		padding: 20rpx 30rpx 130rpx 20rpx;
		overflow: hidden;

		.address {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title {
				font-size: 28rpx;
			}
		}

		.course {
			padding: 30rpx;
			margin-top: 20rpx;
			background-color: white;
			border-radius: 10rpx;

			.title: {
				font-size: 28rpx;
			}

			.course_goods {
				margin-top: 24rpx;
				display: flex;
				//align-items: center;

				.image {
					min-width: 240rpx;
					height: 140rpx;
					border-radius: 10rpx;

				}

				.text {
					//height: 140rpx;
					display: flex;
					flex-direction: column;
					// justify-content: space-between;
					margin-left: 20rpx;
					width: 100%;

					.text-content {
						font-size: 32rpx;
						display: flex;
						//align-items: center;
						justify-content: space-between;

					}

					.price {
						color: #F00505;
						font-size: 36rpx;

						.span {
							font-size: 20rpx;
						}
					}
				}
			}
		}

		.meal {
			padding: 30rpx;
			background-color: white;
			border-radius: 10rpx;
			margin-top: 20rpx;

			.title {
				font-size: 28rpx;
			}

			.image {
				margin-top: 20rpx;
				height: 188rpx;
				width: 242rpx;
				border-radius: 10rpx;
			}

			.text {
				margin-top: 20rpx;
				font-size: 28rpx;
				color: #787878;
			}
		}


	}

	.btn {
		display: flex;
		align-items: center;
		height: 100rpx;


		.btn-left {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 40rpx;
			height: 100rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
		}

		.btn-right {
			background: linear-gradient(90deg, #5062A7 0%, #354678 100%);
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: white;

			font-size: 32rpx;
		}
	}
</style>